/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */


function GuiSalle(myparent, refreshInterval){
    this.parents = myparent;
    this.refreshInterval = refreshInterval;
    this.salles = new Array();
    this.loadObject = function(json){
        $(this.parents).html("");
        for(var i=0; i < json.length;i++){
            var salle = json[i];
            var jSalle = new Salle("","",Array());
            jSalle.loadJson(salle);
            this.salles.push(jSalle);
            $(this.parents).append(this.generateSalle(jSalle));
        }
        $(this.parents).append(generateRecycleBin());
        $(this.parents).append(generateAddSalle());
    };

    
    this.generateSalle = function(salle){
        var element = $("<div>",{
            class : "salle"
        });
        var divName = $("<p>",{
            class : "name",
            text : salle.getName()
        });
        divName.click(function(event){
//           event.stopPropagation();
        });
        element.append(divName);
        var divMachines = $("<div>",{
            class : "machines",
        });
        for(var i= 0; i < salle.getMachines().length; i++){
            divMachines.append(generateMachine(salle.getMachines()[i]));
        }
        divMachines.append(generateAddMachine())
        element.append(divMachines);
        var nbMachine = $("<p>",{
            class : "nbmachine",
            text : salle.getMachines().length + " machine" + salle.getMachines().length >1?"s":""
        });
        element.append(nbMachine);
        element.click(function(){
            if($(this).hasClass("big"))
                $(this).removeClass("big");
            else
                $(this).addClass("big");
        });
        element.droppable({
            drop : function(event, ui){
                var drag = ui.draggable;
                var machine = new Machine(drag.find("p.ip").text())
                
                drag.parent(".salle.big .machines").css("overflow-y", "scroll");
                $(".recyclebin .background").css("background-image", 'url("images/recyclebin_empty.png")');
                $(this).find(".machines").append(generateMachine(machine))
                drag.remove()
            },
            accept : '.machine',
        }); 
        element.draggable({
            containment : '#tabs-home',
    //        snap : true,
            revert : "invalid",
            start : function(event, ui){
    //            var drag = ui.helper;
    //            var scroll = drag.scrollTop();
    //            drag.parent(".salle.big .machines").css("overflow-y", "visible");
    //            drag.scrollTop(scroll);
//            ui.helper.bind("click.prevent",
//                function(event) { event.preventDefault(); });
                $( event.toElement ).one('click', function(e){ e.stopImmediatePropagation(); } );
                $(".recyclebin .background").css("background-color", 'rgba(224,23,23,80)');
            },
            stop: function(event, ui) {
                // event.toElement is the element that was responsible
                // for triggering this event. The handle, in case of a draggable.
//                $( event.toElement ).one('click', function(e){ e.stopImmediatePropagation(); } );
                $(".recyclebin .background").css("background-color", 'transparent');
            }
        });
        return element;
    };
}
generateRecycleBin = function(){
    var element = $("<div>",{
        class : "recyclebin"
    });
    var divName = $("<p>",{
        class : "name",
        text : "Supprimer"
    });
    divName.click(function(){

    });
    element.append(divName);
    
    var divBackground = $("<p>",{
        class : "background",
    });
    element.append(divBackground);
    
    element.droppable({
        drop : function(event, ui){
            var drag = ui.draggable;
            drag.remove();
            drag.parent(".salle.big .machines").css("overflow-y", "scroll");
            $(".recyclebin .background").css("background-color", 'transparent');
        },
        accept : '.salle, .salle.big, .machine',
    }); 
    return element;
}
generateAddSalle = function(){
    var element = $("<div>",{
        class : "add-salle"
    });
    var divName = $("<p>",{
        class : "name",
        text : "Ajouter une salle"
    });
    element.click(function(){
        $("#dialog-form-salle").dialog("open");
    });
    element.append(divName);
    
    var divBackground = $("<p>",{
        class : "background",
    });
    element.append(divBackground);
    return element;
}
generateAddMachine = function(){
    var element = $("<div>",{
        class : "add-machine"
    });
    element.click(function(event){
        event.stopPropagation();
        $("#dialog-form-machine").dialog("open");
    });
    
    var divBackground = $("<p>",{
        class : "background",
    });
    element.append(divBackground);
    return element;
}
generateMachine = function(machine){
    var element = $("<div>",{
        class : "machine"
    });
    var background = $("<div>",{
        class : "background"
    });
    var info = $("<div>",{
        class : "info"
    });
    var divIp = $("<p>",{
        class : "ip",
        text : machine.getIpAddress()
    });
    background.append(info);
    element.append(background);
    element.append(divIp);
    element.draggable({
        containment : '#tabs-home',
//        snap : true,
        revert : "invalid",
        start : function(event, ui){
            var drag = ui.helper;
            drag.parent(".salle.big .machines").css("overflow-y", "visible");
            $(".recyclebin .background").css("background-color", 'rgba(224,23,23,80)');
        },
        stop : function(event, ui){
            var drag = ui.helper;
            drag.parent(".salle.big .machines").css("overflow-y", "scroll");
            $(".recyclebin .background").css("background-color", 'transparent');
        }
    });
    element.click(function(event){
        event.stopPropagation();
    });
    return element;
};